<template>
  <div class="stoneLog">
    <div class="header">
      <div class="title"> 
        <el-icon><Lightning /></el-icon>{{total}}
      </div>
      <div class="slogan">Grieved over the years, flowers are moved to tears</div>
    </div>

    <div class="content">
      <template v-for="item in lifeList">
        <div class="detail" @click="lifeListHandleClick(item.id)">
          <div class="detail-title">{{item.title}}</div>
          <div class="detail-content"  v-html="item.content"></div>
        </div>
        <div class="content-time"> <el-icon><Timer /></el-icon> &nbsp;{{formatUTC(item.createAt)}}</div>
      </template>
      
    </div>

    <el-col  :xs="24" class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
    </el-col>

  </div>
</template>

<script setup lang="ts">
import useLifeStore from '@/store/blog/life'
import { storeToRefs } from 'pinia';
import { formatUTC } from '@/utils/format'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const lifeStore = useLifeStore()

const currentPage = ref(1)
const pageSize = ref(10)
fetchUserListData()


const { lifeList, total } = storeToRefs(lifeStore)

function handleCurrentChange() {
  fetchUserListData()
  // console.log('currentPage change',currentPage.value)
}

function handleSizeChange() {
  fetchUserListData()
  // console.log('pageSize change',pageSize.value)
}



//定义函数
function fetchUserListData(fromData: any = {}) {
  const size = pageSize.value
  const limit = (currentPage.value - 1) * size
  const pageInfo = {limit, size}

  const queryInfo = { ...pageInfo, ...fromData }
  //发起网络请求
  lifeStore.getLifeListAction(queryInfo)

}



function lifeListHandleClick(id: number) {
  // console.log(id)
  router.push('/life/' + id)
}

</script>

<style scoped lang="less">
.stoneLog {
  padding: 20px;
  margin-bottom: 20px;
  .header {
    padding: 5px;
    display: flex;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    color: #670dc1;
    .title {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
  }
  .content {
    padding: 20px;
    
    .detail {
      padding: 20px;
      height: 80px;
      box-shadow: 0 0 6px rgba(0,0,0,.1);
      border-radius: 5px;
      overflow: hidden;
      transition: box-shadow 500ms ease;
      &:hover {
        box-shadow: 0 2px 6px rgba(47, 74, 223, 0.5);
        cursor: pointer;
      }
      .detail-title {
        text-align: center;
        font-size: 18px;
      }
      .detail-content {
        font-family:KaiTi;
        margin-top: 10px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .content-time {
        display: flex;
        font-size: 12px;
        text-align: end;
        justify-content: flex-end;
        align-items: center;
        color: #73767a;
        margin-bottom: 15px;
        margin-top: 5px;
    }
  }
  .pagination {
    display: flex;
    margin: auto;
    padding: 10px;
    overflow-x:scroll;
    // overflow-x:hidden;
    overflow-y:hidden;
      /*
        解决ios上滑动不流畅
    */
    -webkit-overflow-scrolling:touch;
  }
}

.pagination::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.pagination::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #f4a7ca;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.pagination::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}
</style>
